<!-- 商品详情 -->
<template>
  <div>
    <div class="title">
      <span>商品管理</span>
      <div>
        <el-button type="primary" @click="jumpgoodsentry">录入商品</el-button>
        <el-button icon="el-icon-refresh" ></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          
          <div class="leftitem">
              <el-select v-model="type" placeholder="商品分类">
               <el-option v-for="(item,index) in brandarr" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
              
          </div>
          <div>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-input class="merchants"  v-model.trim="goodsname"  placeholder="商品名称"></el-input>
          </div>
          
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="goodslist">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="goodsarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column prop="typeName" align="center" label="商品分类"></el-table-column>
          <el-table-column prop="name" align="center" label="商品名称"></el-table-column>
          <el-table-column prop="rental" align="center" label="租金(元)">
            <template slot-scope="scope">
              <span type="text"  size="small">￥{{(scope.row.rental/100).toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deposit" align="center" label="押金(元)">
            <template slot-scope="scope">
              <span type="text"  size="small">￥{{(scope.row.deposit/100).toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="brand" align="center" label="品牌"></el-table-column>
          <el-table-column prop="model" align="center" label="型号"></el-table-column>
          <el-table-column prop="stock" align="center" label="库存"></el-table-column>
          <!-- <el-table-column prop="createTime" align="center" label="参数规格"></el-table-column> -->
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" type="text" class="green" size="small">上架</span>
              <span v-if="scope.row.status == 99" type="text" class="red" size="small">下架</span>
            </template>
          </el-table-column> 
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text red" v-if="scope.row.status == 1" size="small" @click="soldout(scope.row.id)">下架</el-button>
              <el-button type="text" v-if="scope.row.status == 99" size="small" @click="putaway(scope.row.id)">上架</el-button>
              <el-button type="text"  size="small" @click="jumpgoodsentye(scope.row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="goodsdelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>

    </div>
  </div>
</template>

<script>

import { goodspage,goodsupdate,goodsremove,goodsCategorylist} from "@/api/api";
export default {
  data () {
    return {
        goodsarr:[],
        ccc:'',
        storesno:'',
        merchantsno:'',
        goodsname:'',
        loading:true,
        combined:0,
        cur_page: 1,
        cur_size: 10,
        brandarr:'',
        type:'',
        userinfo:''
    };
  },
  created(){
      this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
      this.goodslist()
      this.goodsType()
  },
  components: {},

  computed: {},


  methods: {
    //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.shop()
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
    },
     // 分页数量
    sizechange(val){
      this.cur_size = val
      this.shop()
       
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
       
    },
    // 重置
    reset(){
        this.goodsname = ''
        this.cur_page = 1
        this.type = ''
    },
     // 商品类型
    goodsType(val){
        let that = this
        goodsCategorylist({
            merchantId : that.userinfo.fid,
            lev: '2',
            pid:val
        }).then(res => {
            if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else {
                that.brandarr = res.data
            }
        });
    },
    // 商品列表
    goodslist(){
        goodspage({
          page: this.cur_page,
          size: this.cur_size,
          name: this.goodsname,
          type: this.type
        }).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            this.goodsarr = res.data
            this.loading = false
            this.combined = res.pageInfo.recordCount
            this.pageCount = res.pageInfo.pageCount
          }
        });
    },
    jumpgoodsentry(){
        this.$router.push('/goodsentry');
    },
    // 上架
    putaway(id){
       goodsupdate({
         status: 1
        },id).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
           if(res.code == 200){
             this.$message({
                    message: "上架成功",
                    type: "success"
                });
                this.goodslist()
           }else{
             this.$message.error(res.message);
           }
          }
        });
    },
    // 下架
    soldout(id){
      goodsupdate({
         status: 99
        },id).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
           if(res.code == 200){
             this.$message({
                    message: "下架成功",
                    type: "success"
                });
                this.goodslist()
           }else{
             this.$message.error(res.message);
           }
          }
        });
    },
     // 删除商品
    goodsdelete(val){
        this.$confirm('是否确定删除？如确定，该商品将被删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         goodsremove({},val).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.$message({
            message: '已删除',
            type: 'success'
          });
          this.goodslist()
          }else{
            this.$message.error(res.message);
          }
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
       
    },
    // 编辑商品跳转
    jumpgoodsentye(val){
      this.$router.push({path:'/goodsentry',query:{id:val,state:true}})
    }
  }
}

</script>
<style lang='less' scoped>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.green{
    color: green;
}
.red{
    color: red !important;
}
</style>